<script lang="ts" setup>
/**
 * 分页组件
 * total 总条数
 * page 受控模式下的当前页
 * pageSize 受控模式下的分页大小
 * size 分页按钮的大小
 * pageSlot 页码显示的个数
 * @updatePage 当前页发生改变时的回调函数
 */
interface Props {
  total: number
  page: number
  pageSize: number
  size?: string
  pageSlot?: number
}
const props = withDefaults(defineProps<Props>(), {
  total: 0,
  page: 1,
  pageSize: 10,
  size: 'medium',
  pageSlot: 5,
})
const emit = defineEmits(['update:page', 'updatePage'])
const { total, page, pageSize, size, pageSlot } = toRefs(props)

const Cpage = computed({
  get() {
    return page.value
  },
  set(val) {
    emit('update:page', val)
  },
})
function updatePage(page) {
  Cpage.value = page
  emit('updatePage')
}
</script>

<template>
  <n-pagination
    v-model:page="Cpage"
    :page-size="pageSize"
    :item-count="total"
    :size="size"
    :page-slot="pageSlot"
    mt-15
    flex
    items-center
    justify-center
    :on-update:page="updatePage"
  />
</template>

<style lang="scss" scoped>
</style>
